<template>
<div class="three">
        <wtop></wtop>
        <div class="center">
            <div class="right">
              <el-tree
                :data="treelist"
                show-checkbox
                node-key="id"
                ref="tree"
                default-expand-all
                :expand-on-click-node="false"
                :check-on-click-node="true"
                :props="defaultProps"
                @check="handleCheck"
                @check-change="handleCheckChange">
              </el-tree>
              <el-button type="danger" @click="delfatherNode">获取最终BOSS</el-button>
            </div>
        <!-- <foot></foot> -->
    </div>
  </div>
</template>

<script>
  import wtop from '@/components/callsystem/wtop.vue'
  import foot from '@/components/foot.vue'
  export default {
      components: {
          "wtop": wtop,
          "foot": foot,
      },
      name: "three",
      data() {
          return {
              treelist: [{
                id: 1,
                label: '一级部门1',
                disabled:false,
                children: [{
                  parentid: 1,
                  id: 3,
                  label: '二级 2-1',
                  disabled:false
                  },{
                    parentid: 1,
                    id: 4,
                    label: '二级 3-1-1',
                    disabled:false
                  }, {
                    parentid: 1,
                    id: 5,
                    label: '二级 3-1-2',
                    disabled:false
                  }]
                }, {
                  id: 2,
                  label: '一级部门2',
                  disabled:false,
                  children: [{
                    parentid: 2,
                    id: 6,
                    label: '二级 3-2-1',
                    disabled:false
                    }, {
                    parentid: 2,
                    id: 7,
                    label: '二级 3-2-2',
                    disabled:false
                  }]
              }],
              defaultProps: {
                children: 'children',
                // label: 'name'
                label: 'label'
              },
              idList: [],
              nodeData: []
          }
      },
      created() {
      },
      mounted() {

      },
      methods: {
        //树形选择
        handleCheck(currNode,data){
          // console.log(1,currNode,data);
          this.idList = data.checkedKeys
          // console.log(1,this.idList,currNode);
          let arrChildren = currNode.children
          // console.log(arrChildren);
          if(arrChildren  !== undefined ){
            // this.idList.splice(this.idList.indexOf(currNode.id),1)
            arrChildren.forEach(item => {
                item.disabled = !item.disabled
                item.disabled == false ? this.idList.splice(this.idList.indexOf(item.id),1) : ''
                item.disabled = this.idList.indexOf(item.id) == -1 ? false : true
            })
            // this.idList.splice(this.idList.indexOf(currNode.id),1)
          }
          if(currNode.parentid && arrChildren == undefined ){
            if(this.idList.indexOf(currNode.parentid) != -1){
              this.idList.splice(this.idList.indexOf(currNode.id),1)
              this.idList.splice(this.idList.indexOf(currNode.parentid),1)
              this.$message.warning('全选操作！请点击部门哦~');
            }
          }
          this.$refs.tree.setCheckedKeys(this.idList)
                // console.log(2,this.idList);

        },
         handleCheckChange(data,checked,indeterminate) {
                // console.log('handleCheckChange:',data, checked, indeterminate);
                // this.idList.indexOf(data.id) !=  -1 ? this.idList.splice(this.idList.indexOf(data.id),1) : ''
                  // this.$refs.tree.setCheckedKeys(this.idList)
        },
        //去除父节点
        delfatherNode(){
          // console.log(this.idList);
          for(let i in this.idList) {
            this.treelist.forEach(item => {
              if(this.idList[i] == item.id){
                // console.log(item);
                item.children !== undefined ? this.idList.splice(this.idList.indexOf(item.id),1) : ''
              }
            })
            }
          console.log(1,this.idList);
        }
      }
  }
</script>

<style lang="scss" scoped>
    .three{ margin: 0; padding: 0; background: #EFEFEF;
        .listupload{ font-size: 14px;
            .li{flex: 1; line-height: 38px; margin-top: 20px;}
            #drop{
              .el-button--primary{ background: #ffffff; color: #409EFF;border: 1px solid #409EFF;margin-left: 0px; }
            }

        }
        .center{ min-width: 1366px;width: 1366px; margin: 0 auto; display: flex; justify-content: space-between;
    		.right{ flex-basis: 1366px; background: #ECECEC;
                .title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}

            }
            .powertop{ display: flex; width: 640px; }
            .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #EBECEF solid; color: #727272; border-right: 1px #EAEAEA solid; font-size: 14px; text-align: center;}
            .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
            .con{  background: #FFFFFF; padding: 30px 40px; display: flex; justify-content: space-between;
                .conleft{
                    .flex{ display: flex; margin-bottom: 20px;}
                    .gong{ margin-right: 30px; color: #333}
                }
                .conright{
                    .el-input__inner{ line-height: 40px !important; height: 40px !important;}
                }
            }
            .conlist{ padding: 30px; background: #FFFFFF;
                .flex{ display: flex; justify-content: space-between}
                .gong{ display: flex;
                    .el-date-editor.el-input{ width: 200px;}
                    .el-input__inner{ width: 250px;}
                    .el-button--danger{ margin-left: 20px;}
                    .el-button--primary{ padding: 10px 30px; background: #EEF7FF; border: 1px #EEF7FF solid; margin-left: 20px;}
                    .el-date-editor--month{ margin-right: 20px;}
                }
                .gl{ margin-bottom: 20px;
                    .el-input__inner{ width: 200px !important; }
                    .el-button--danger{ margin-left: 0px !important; margin-right: 20px;}
                    .el-input__icon{ line-height: 36px;}
                }
                .ml{
                  .el-button--danger{ margin-left: 10px!important;}
                }
                .list{ display: flex; border-bottom: 1px #eaeaea solid;
                    .th{ background: #EAEAEA; text-align: center; flex: 1; padding: 15px 0; font-size: 14px;}
                    .td{ background: #ffffff; text-align: center; flex: 1; padding: 15px 0; font-size: 14px;}
                    .td2{
                      flex: 1.5;
                      .el-button{padding: 0;}
                    }
                }
                .el-pagination{ text-align: right; margin: 20px 0}
            }
    	}
      .formflex{display: flex;justify-content: space-between;
        .el-input__inner{ width: 200px; }
        .el-input{width: 100%!important;}
        .lineflex{display: flex;
          .el-button--text{height: 40px;margin-left: 20px;}
        }

      }
      .el-button--danger{padding: 14px 30px !important;}
      .el-tree__empty-text{position: initial!important;}
      .formsubmit{justify-content: center;}
      .protag{
      	.el-tag{ margin-right: 20px; margin-bottom: 20px;}
      }
      #drop .el-button--primary{background: none;border: 0;color: #409EFF;margin-left: 10px;}
    }
</style>
